<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课堂助手</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/index_tch.css">
    <link rel="stylesheet" href="css/question.css">
    <link rel="stylesheet" href="css/toast.css">
</head>
<body>
<header id="header" style="z-index: 1111">
    <h1>CLASSROOM ASSISTANT</h1>
    <div class="self-info">
        <img src="image/portrait_tch.png" class="portrait">
        <span class="type">Tch</span>
        <span class="name">戴红军</span>
        <ul class="hover-box">
            <li>
                <a href="#">
                    <img src="image/self.png">
                    <span>个人信息</span>
                </a>
            </li>
            <li>
                <a href="#"><img src="image/logout.png">
                    <span>注销账号</span></a>
            </li>
        </ul>
    </div>
</header>
<div class="nav-bar" id="bar" style="z-index: 0">
    <div>公告栏
        <img class="icon" src="image/bulletin-icon.png" alt="点击添加公告" title="点击添加公告">
    </div>
    <div>课堂问题
        <img class="icon" style="width: 3rem" src="image/question-icon.png" alt="点击添加问题" title="点击添加问题">
    </div>
    <div>资料库
        <img id="icon-3" class="icon" src="image/material-icon.png" alt="点击添加资料" title="点击添加资料" >
    </div>

</div>
<div class="warp">
    <div class="left-side list" id="left-side">
        <div class="card">
            <div class="card-title">2017-02-22 <span class="close">X</span></div>
            <div class="card-content">&nbsp;&nbsp;哈哈哈哈哈哈或或或或或或或哈哈哈哈哈哈</div>
        </div>
        <div class="card">
            <div class="card-title">2017-02-22 <span class="close">X</span></div>
            <div class="card-content">&nbsp;&nbsp;哈哈哈哈哈哈或或或或或或或哈哈哈哈哈哈</div>
        </div>
        <div class="card">
            <div class="card-title">2017-02-22 <span class="close">X</span></div>
            <div class="card-content">&nbsp;&nbsp;哈哈哈哈哈哈或或或或或或或哈哈哈哈哈哈</div>
        </div>
        <div class="card">
            <div class="card-title">2017-02-22 <span class="close">X</span></div>
            <div class="card-content">&nbsp;&nbsp;哈哈哈哈哈哈或或或或或或或哈哈哈哈哈哈</div>
        </div><div class="card">
        <div class="card-title">2017-02-22 <span class="close">X</span></div>
        <div class="card-content">&nbsp;&nbsp;哈哈哈哈哈哈或或或或或或或哈哈哈哈哈哈</div>
    </div><div class="card">
        <div class="card-title">2017-02-22 <span class="close">X</span></div>
        <div class="card-content">&nbsp;&nbsp;哈哈哈哈哈哈或或或或或或或哈哈哈哈哈哈</div>
    </div>
        <div class="card">
            <div class="card-title">2017-02-22 <span class="close">X</span></div>
            <div class="card-content">&nbsp;&nbsp;哈哈哈哈哈哈或或或或或或或哈哈哈哈哈哈</div>
        </div>



    </div>
    <div class="center-side list" id="center-side">
        <div class="card">
            <div class="card-title big-font">Q1:英文中有多少个字母？<span class="close">X</span></div>
            <div class="card-content">
                <ul class="options options-s">
                    <input type="text" placeholder="请输入你的答案">
                    <img src="image/upload.png" alt="">
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="card-title big-font">Q1:英文中有多少个字母？<span class="close">X</span></div>
            <div class="card-content">
                <ul class="options options-s">
                    <li>我的答案: <span>26</span></li>
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="card-title big-font">Q1:英文中有多少个字母？<span class="close">X</span></div>
            <div class="card-content">
                <ul class="options options-s">
                    <li>我的答案: <span>26</span></li>
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="card-title big-font">Q1:英文中有多少个字母？<span class="close">X</span></div>
            <div class="card-content">
                <ul class="options options-s">
                    <li>我的答案: <span>26</span></li>
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="card-title big-font">Q1:英文中有多少个字母？<span class="close">X</span></div>
            <div class="card-content">
                <ul class="options options-s">
                    <li>我的答案: <span>26</span></li>
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="card-title big-font">Q1:英文中有多少个字母？<span class="close">X</span></div>
            <div class="card-content">
                <ul class="options options-s">
                    <li>我的答案: <span>26</span></li>
                </ul>
            </div>
        </div><div class="card">
        <div class="card-title big-font">Q1:英文中有多少个字母？<span class="close">X</span></div>
        <div class="card-content">
            <ul class="options options-s">
                <li>我的答案: <span>26</span></li>
            </ul>
        </div>
    </div>


    </div>
    <div class="right-side list" id="right-side">
        <div class="card">
            <div class="card-head">js权威指南 <span class="gray-word">13.3M</span></div>
            <div class="card-btn">
                <img src="image/download.png" alt="">
            </div>
        </div>
        <div></div>
    </div>
</div>

<section class="bottom-bar" id="bottom-bar">
    <div class="bottom-bar__left">学生管理 视频直播 课程介绍 实时讨论</div>
    <div class="bottom-bar__right">课程问题 课程公告 课程资料</div>
</section>

</body>
<script>
    var list_column = document.getElementsByClassName('list');
    var h = window.innerHeight;
    var bar = document.getElementById('bar');
    var header = document.getElementById('header');
    var b_bar = document.getElementById('bottom-bar');
    var bar_h = bar.offsetHeight;
    var b_bar_h = b_bar.offsetHeight;
    var header_h = header.offsetHeight;
    for(var i = 0 ;i<list_column.length;i++){
        list_column[i].style.height = h-bar_h-header_h-b_bar_h+'px';
    }
    function closeMode() {
        var mode = document.getElementsByClassName('mode');
        for(var j = 0;j<mode.length;j++){
            mode[j].remove();
        }
    }
    function F_Open_dialog() {
        document.getElementById("btn_file").click();
    }
    function showFileDetial() {
        console.log(document.getElementById("btn_file").files[0].name);
        document.getElementById('fileShow').style.display = 'block';
        document.getElementById('file-name').style.display = 'block';
        document.getElementById('fileUnshow').style.display = 'none';
        document.getElementById('file-name').innerText = document.getElementById("btn_file").files[0].name;
    }

</script>
<script src="script/require.js" defer async="true" ></script>
<script src="script/require.js" data-main="script/question-main.js"></script>
</html>